const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    del = require('del'),
    connect = require('gulp-connect'),
    autoprefixer = require('gulp-autoprefixer'),
    sass = require('gulp-sass')

// 集中路径
const paths = {
        html: {
            src: 'src/**/*.html',
            dest: 'dist'
        },
        css: {
            src: 'src/css/**/*.scss',
            dest: 'dist/css'
        },
        js: {
            src: 'src/js/**',
            dest: 'dist/js'
        },
        img: {
            src: 'src/img/**',
            dest: 'dist/img'
        },
        libs: {
            src: 'src/libs/**',
            dest: 'dist/libs'
        }
    }
    // 制定一个删除dist目录的任务
const delDist = () => del('dist')
    // 指定一个html任务：压缩html代码
const html = () => {
        return gulp.src(paths.html.src).pipe(htmlmin({
                removeComments: true,
                collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
                minifyJS: true, // 压缩页面JS
                minifyCSS: true // 压缩页面CSS 
            }))
            .pipe(gulp.dest(paths.html.dest))
            .pipe(connect.reload())
    }
    // 制定css任务：先加上兼容性前缀，再压缩css代码
const css = () => {
        return gulp.src(paths.css.src)
            .pipe(sass())
            .pipe(autoprefixer({
                presets: ['@babel/env']
            }))
            // .pipe(cleanCss())
            .pipe(gulp.dest(paths.css.dest))
            .pipe(connect.reload())
    }
    // 制定js任务：先使用babelES6转成ES5，再压缩混淆js代码
const js = () => {
        return gulp.src(paths.js.src)
            .pipe(babel({
                presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(gulp.dest(paths.js.dest))
            .pipe(connect.reload())
    }
    // img任务：把src里的图片全部移动到dist即可
const img = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))

// libs任务：把libs里的文件全部移动到dist即可
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
    // 制定watch任务：监听代码改变自动重启对应任务
const watch = () => {
        // 监听html文件，当文件改变就自动重启html任务
        gulp.watch(paths.html.src, html)
        gulp.watch(paths.css.src, css)
        gulp.watch(paths.js.src, js)
    }
    // 制定server任务：开启本地服务器
const server = () => {
    connect.server({
        root: 'dist',
        port: 2005,
        livereload: true
    })
}

module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, watch, server))